<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <link href="/static/dist/lib/datagrid/zui.datagrid.min.css" rel="stylesheet">
    <script src="/static/dist/lib/datagrid/zui.datagrid.js"></script>
    <div id="myDataGrid" class="datagrid">
        <header style="height: 40px;">
            <div class="input-control search-box search-box-circle has-icon-left has-icon-right pull-right" id="searchboxExample">
                <input id="inputSearchExample1" type="search" class="form-control search-input" placeholder="搜索">
                <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
                <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
            </div>
            <div>
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button type="button" class="btn" id="resource_add_btn">添加</button>
                        <button type="button" class="btn" id="resource_edit_btn">编辑</button>
                        <button type="button" class="btn" id="resource_del_btn">删除</button>
                    </div>

                </div>
            </div>

        </header>
        <div class="datagrid-container"></div>
        <div class="pager"></div>
    </div>
    <script type="application/javascript">
        var myData = $('#myDataGrid').datagrid({
            checkable: true,
            checkByClickRow: true,
            showRowIndex: true,
            dataSource: {
                cols:[
                    {name: 'id', label: 'ID', width: 100},
                    {name: 'name', label: '资源名称', width: 134},
                    {name: 'url', label: '资源路径', width: 134},
                    {name: 'openMode', label: '打开方式', width: 134},
                    {name: 'description', label: '资源介绍描述', width: 287},
                    {name: 'createTime', label: '时间', valueType: 'date',width: 160},
                    {name: 'status', label: '状态', width: 109},
                    {name: 'opened', label: '打开状态', width: 287},
                    {name: 'resourceType', label: '资源类别', width: 287},
                    {name: '', sort: false, width: 'auto', text: '操作', type: 'string', flex: false, colClass: ''}
                ],
                remote: function(params) {
                    return {
                        // 原创请求地址
                        url: '/admin/resource/list',
                        // 请求类型
                        type: 'GET',
                        // 数据类型
                        dataType: 'json'
                    };
                }
            },
            states: {
                pager: {page: 1, recPerPage: 10},
                search: 'etst'
            },
            searchFunc: function(item, searchKeyArr){
                console.log(item);
                console.log(searchKeyArr);
            },
            valueOperator: {
                // date 值转换器会影响所以 valueType 为 `date` 的列
                date: {
                    getter: function(dataValue, cell, dataGrid) {
                        return new Date(dataValue).toLocaleString();
                    }
                }
            },
            onLoad: function(result) {
                //console.log(result);
            }
        });

        $('#resource_add_btn').click(function () {
            new $.zui.Messager('即将打开新增窗口', {
                icon: 'heart',
                placement: 'center' // 定义显示位置
            }).show();
            $('body').hrefClick('/admin/resource/add');
        });

        $('#resource_edit_btn').click(function () {

            // 获取数据表格实例   myData = $('#myDataGrid')
            var myDataGrid = $('#myDataGrid').data('zui.datagrid');

            // 获取当前已选中的行数据项
            var selectedItems = myDataGrid.getCheckItems();
            if(selectedItems.length < 1){
                // primary'[黑色]|'success'[蓝色]|'info'[青色]|'warning'[橙色]|'danger'[红色]|'important'[棕色]|'special[紫色]
                //primary'|'success'|'info'|'warning'|'danger'|'important'|'special
                new $.zui.Messager('请选择你要编辑的数据。', {
                    type: 'warning',
                    fade:  true,  // 渐隐效果
                    scale: true,   // 缩放动画
                    icon: 'frown',//smile
                    close: true,
                    placement: 'center' // 定义显示位置
                }).show();
            }else if(selectedItems.length > 1){
                new $.zui.Messager('每次只能编辑一条数据。', {
                    type: 'warning',
                    fade:  true,  // 渐隐效果
                    scale: true,   // 缩放动画
                    icon: 'frown',//smile
                    close: true,
                    placement: 'center' // 定义显示位置
                }).show();
            }else{
                $('body').hrefClick('/admin/resource/edit?id=' + selectedItems[0].id);
            }

        });

        $('#resource_del_btn').click(function () {


            // 获取数据表格实例   myData = $('#myDataGrid')
            var myDataGrid = $('#myDataGrid').data('zui.datagrid');

            // 获取当前已选中的行数据项
            var selectedItems = myDataGrid.getCheckItems();

            var ids = "";
            for(index in selectedItems){
                if(ids){ids += ",";}
                ids += selectedItems[index].id;
            }
            $.post('/admin/resource/delete', {'ids': ids}, function (res) {
                if(res.code == 200 && res.status){
                    new $.zui.Messager('数据删除完成', {
                        type: 'success',
                        icon: 'check',//smile
                        close: true,
                        time: 6000,
                        placement: 'center' // 定义显示位置
                    }).show();
                    myDataGrid.render();
                    //$('body').hrefClick('/admin/resource/index')
                }else{
                    new $.zui.Messager('数据删除失败', {
                        type: 'danger',
                        icon: 'frown',//smile
                        close: true,
                        time: 6000,
                        placement: 'center' // 定义显示位置
                    }).show();
                    myDataGrid.render();
                    //$('body').hrefClick('/admin/resource/index')
                }
            });
            //$('body').hrefClick('/admin/resource/add')
        });
    </script>
</div>
</body>
</html>